import { FC, useRef } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import { Swiper, SwiperRef } from 'antd-mobile'
import "./index.scss"

interface IPlanHistory {}

const PlanHistory: FC<IPlanHistory> = () => {

    const { t } = useTranslation()

    const planSwiper = useRef<SwiperRef>(null)

	return (
		<div id="plan-history">
            <div className="plan-history-title">
                PL
                <span className="plan-history-title-a">A</span>
                N & HIST
                <span className="plan-history-title-or">OR</span>
                Y
            </div>
            <div className="plan-history-line">
                <span className="circle first"></span>
                <div className="plan-swiper-line"></div>
                <div className="current-line"></div>
                <span className="circle last"></span>
            </div>
            <div className="plan-history-swiper">
                <Swiper
                    trackOffset={10}
                    slideSize={75}
                    className="swiper-box"
                    defaultIndex={1}
                    ref={planSwiper}
                    indicator={() => null}
                    >
                        {
                            new Array(7).fill(null).map((_, index) => (
                                <Swiper.Item className="swiper-item" key={index}>
                                    <div className="swiper-item-title">{t('indexPlan.title')}</div>
                                    <div className="swiper-item-desc">
                                        <p>{t('indexPlan.paragraph1')}</p>
                                        <p>{t('indexPlan.paragraph2')}</p>
                                        <p>{t('indexPlan.paragraph3')}</p>
                                        <p>{t('indexPlan.paragraph4')}</p>
                                        <p>{t('indexPlan.paragraph5')}</p>
                                        <p>{t('indexPlan.paragraph6')}</p>
                                        <p>{t('indexPlan.paragraph7')}</p>
                                    </div>
                                </Swiper.Item>
                            ))
                        }
                </Swiper>
                <span onClick={() => planSwiper.current?.swipePrev()} className="plan-prev"></span>
                <span onClick={() => planSwiper.current?.swipeNext()} className="plan-next"></span>
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(PlanHistory)